<template>
    <div class="recommend-user-list-container">
        <!--搜索条件-->

        <div class="bac-container-none-padding">
            <div class="col-right-top">
               <span class="top-title">
                   推荐
               </span>
            </div>
        </div>

        <div class="bac-container-none-padding">
            <ul class="user-list-small" v-infinite-scroll="load">
                <li v-for="(user,index) in userList" :key="index" class="user-item">
                    <el-card shadow="hover">
                        <el-row>
                            <el-col :span="3" class="user-avatar">
                                <div @click="openHome(user.userId)">
                                    <el-avatar :size="40" :src="user.headUrl"></el-avatar>
                                </div>
                            </el-col>
                            <el-col :span="20" class="user-data">
                                <div class="user-name" @click="openHome(user.userId)"><span>{{user.realName}}</span>
                                    &nbsp;
                                    <el-tag type="danger" size="mini" effect="plain" v-if="user.type == 1">v</el-tag>
                                    <el-tag type="danger" size="mini" effect="plain" v-if="user.creditLevel == 1">实名
                                    </el-tag>
                                </div>
                                <ul class="user-data-item">
                                    <li v-if="user.subCategoryName != null && user.parentCategoryName != null">
                                        <span>行业：</span>
                                        <el-link :underline="false">{{user.subCategoryName == null ?
                                            user.subCategoryName : user.parentCategoryName}}
                                        </el-link>
                                    </li>
                                    <li v-if="user.cityName != null">
                                        <span>城市：</span>
                                        <el-link :underline="false">{{user.cityName}}</el-link>
                                    </li>
                                    <li v-if="user.profession != null">
                                        <span>职位：</span>
                                        <el-link :underline="false">
                                            {{user.profession}}
                                        </el-link>
                                    </li>
                                </ul>
                                <ul class="user-data-item" v-if="user.company != null">
                                    <li>
                                        <span>公司：</span>
                                        <el-link :underline="false">{{user.company}}
                                        </el-link>
                                    </li>
                                </ul>
                                <div class="user-operate">
                                    <el-button size="mini" @click="userConcernAdd(user)"
                                               :loading="user.addLoading" v-if="user.concernUserId == null"><i
                                            class="el-icon-plus"></i>关注
                                    </el-button>
                                    <el-button size="mini"  plain v-else >{{user.isEachOther ? '已互关' : '已关注'}}</el-button>
                                </div>
                            </el-col>
                        </el-row>
                    </el-card>
                </li>

            </ul>
            <div class="empty-container" v-if="userList.length == 0 ">
                <div class="bottom-text">{{loading == false ? '推荐为空' : '加载中'}}</div>
            </div>

        </div>
    </div>
</template>

<script>
    import util from '@/utils/commonUtil';

    export default {
        data: function () {
            return {
                loadFlag: true,
                loading: false,
                params: {
                    likeStr: "",
                    page: 1,
                    size: 20,
                    count: 0
                },
                userList: []
            }
        },
        methods: {
            initData() {
                this.loading = true;
                this.$post("/user/concern/queryRecommendUserPage", this.params).then(res => {
                    if (res.data.rows == null || res.data.rows.length == 0) {
                        this.loadFlag = false;
                        this.loading = false;
                        return;
                    }
                    res.data.rows.forEach(u => {
                        u.headUrl =util.setDefaultHead(u.headUrl) ;
                        u.addLoading = false;
                    })
                    this.userList = this.userList.concat(res.data.rows);
                    this.params.count = res.data.count;
                    this.loading = false;
                }).catch(() => {
                    this.loading = false;
                })
            },
            load() {
                if ((this.loadFlag == false && this.params.count == this.userList.length ) || this.loading) {
                    return;
                }
                this.params.page++;
                this.initData();
            }
            ,
            openHome(id) {
                this.$router.push({
                    path: "/home",
                    query: {
                        id: id
                    }
                })
            },
            userConcernAdd(user) {
                user.addLoading = true;
                this.$post("/user/concern/add", {
                    concernUserId: user.userId
                }).then(res => {
                    user.concernUserId = res.data.concernUserId
                    user.isEachOther = res.isEachOther;
                    user.addLoading = false;
                }).catch(() => {
                    user.addLoading = false;
                })
            }
        },
        mounted() {
            this.initData();
        }
    }
</script>

<style>



</style>